<template>
  <div style="display: inline-block;">


    <el-form ref="form" :model="form"  :inline="true"  label-width="100px">
     <el-form-item   label="公司名称" prop="name"  >

       <el-input v-model="form.name"  :disabled="true" style="width: 480px;">
          <template slot="append">
            <el-button   type="primary" @click="open=true" icon="el-icon-search">选择</el-button>
          </template>
        </el-input>


     </el-form-item>
    </el-form>

    <!-- 新增和修改对话框-->
    <el-dialog title="公司查询" :visible.sync="open" width="1000px" append-to-body :close-on-click-modal="false" :before-close="cancelForm">

      <!-- 搜索区 -->
      <el-form :model="queryParam" ref="queryForm" size="small" :inline="true">
        <el-form-item label="公司名称" prop="name">
          <el-input v-model="queryParam.name" placeholder="请输入公司名称" clearable style="width: 240px"
            @keyup.enter.native="handleQuery" />
        </el-form-item>

         <el-form-item label="状态" prop="status">
          <el-select v-model="queryParam.status" placeholder="状态" clearable>
            <el-option
              v-for="dict in dict.type.compony_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        </el-form-item>
      </el-form>



      <el-table :data="tableData.rows" border style="width: 100%"
         @row-click="singleElection"  highlight-current-row  >
        <el-table-column align="center" width="55" label="选择">
           <template slot-scope="scope">
             <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
             <el-radio class="radio" v-model="templateSelection" :label="scope.row.id">&nbsp;</el-radio
             >
           </template>
         </el-table-column>
        <el-table-column prop="id" label="编号" width="140" />
        <el-table-column prop="name" label="公司名称" width="300" />

        <el-table-column prop="contentUse" label="联系人"  />
        <el-table-column prop="contentPhone" label="联系电话"  />

       <el-table-column label="状态" align="center" prop="status">
         <template slot-scope="scope">
           <dict-tag :options="dict.type.compony_status" :value="scope.row.status"/>
         </template>
       </el-table-column>

      </el-table>

      <!-- 分页条 -->
      <el-pagination v-if="tableData.total>0" :current-page="queryParam.page" :page-sizes="[1, 5, 10, 20,30,50,100]"
        :page-size="queryParam.size" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />


       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确定</el-button>
         <el-button @click="cancelForm">关闭</el-button>
       </div>

     </el-dialog>




  </div>



</template>

<script>
  import PageMixin from '@/mixins/PageMixin.js'
  import {dataApi} from '@/api/info/company.js'

  export default {
   mixins: [PageMixin],
   // 查询通用字典中的键
   dicts: ['compony_status'],
   // 公共一个属性
   props: {
      item : Object
   },
   created(){
     //还原值
     if(this.item && this.item.componeyId){
       this.templateSelection=this.item.componeyId
       this.form.name= this.item.componeyName
       this.form.id=this.item.componeyId
     }
   },
    data(){
      return {
        // 查询函数
         fetchDataApi: dataApi,
         primaryKey: 'id',
         open: false,
         form: {

         },
         templateSelection: undefined
      }
    },
    methods:{
      // 关闭表单的时候
      cancelForm(){
        this.open =false
        this.$refs['queryForm'].resetFields();
        this.queryParam.page=1
        this.tableData = {
          total: 0,
          rows: []
        }
      },
      // 确认选中
      submitForm(){
        if(this.templateSelection){
          this.$emit('callback',this.form)
           this.cancelForm()
        }else{
            this.$message.error('请选择公司信息');
        }

      },
      //单选
      singleElection(row) {
         this.form=row
      },
      //外部调用方法，清空表单的值
      clearForm(){
        this.templateSelection=undefined
        this.form.name= undefined
        this.form.id=undefined
      }
    }
  }
</script>

<style>
</style>
